<template>
  <div class="box7">
    <div id="pieChart7"></div>
  </div>
</template>
 
<script>
export default {
  mounted() {
    this.chartFn();
  },
  methods: {
    chartFn() {
      // 基于准备好的dom，初始化echarts实例
      var pieChart7 = this.$echarts.init(document.getElementById("pieChart7"));
      pieChart7.setOption({
        title: {
          text: "评价占比",
          x: "center"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: ["好评 880 40%", "中评 300 30%","差评 130 20%"]
        },

        series: [
          {
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: '{c}%'
              }
            },

            name: "访问来源",
            type: "pie",
            radius: ["30%", "45%"],
            center: ["50%", "60%"],
            data: [
              {
                value: 800,
                name: "好评 880 40%",
                itemStyle: { normal: { color: "	#006effe5" } }
              },
              {
                value: 300,
                name: "中评 300 30%",
                itemStyle: { normal: { color: "	#FF8C00" } }
              },
              {
                value: 300,
                name: "差评 130 20%",
                itemStyle: { normal: { color: "	#FF8C00" } }
              },
         
            ]
          }
        ]
      });
    }
  }
};
</script>
 
<style scoped>
.box7 {
  margin-top: 50px;
  height: 500px;
}
#pieChart7 {
  width: 500px;
  height: 500px;
  position: absolute;
}
</style>